<template>
    <div class="evaluate">
        <div :class="['content',{active:evaluate_status!=0}]">
            <div class="top">
                <span>{{evaluate_status!=2?'评价':'评价完成'}}</span>
                <i @click="gotoHome" class="iconfont icon-icon2"></i>
            </div>
            <div class="detail">
                <div class="star">
                    <i v-for="(i,index) in starDec" 
                        :class="['iconfont',starCount>index?'icon-xing1':'icon-xing',{'disable':evaluate_status==2}]"
                        @click="selectStar(index)"></i>
                </div>

                <div class="starDec">{{starDec[starCount-1]}}</div>

                <div class="otherDec">
                    <span v-for="dec in otherDec"
                        @click="otherDecSelect(dec)"
                        :class="{active:otherDecSelected.includes(dec),'disable':evaluate_status==2}">{{dec}}</span>
                </div>

                <div :class="['input',{border:inputBorder}]" v-if="evaluate_status==1||evaluate_status==2">
                    <input v-show="evaluate_status!=2" type="text" v-model="customInput" placeholder="其它想说的"/>
                    <span v-show="evaluate_status==2 && customInput!=''">{{customInput}}</span>
                </div>

                <div :class="['evaluate_btn',{active:evaluate_status==2}]" v-if="evaluate_status!=0" @click="submit">
                    {{evaluate_status!=2?'匿名提交':'评价已提交'}}
                </div>
            </div>
        </div>
    
        <div class="shadow"></div>
    </div>
</template>

<script>
    import ibutton from '@/components/common/ibutton'
    import {assessment} from '@/http'
    import {mapGetters} from 'vuex'
    export default {
        name:'evaluate',
        data(){
            return {
                evaluate_status:'0',  //0 待输入，1：已输入，2已提交
                starCount:'0',
                otherDecSelected:[],
                customInput:'',
                inputBorder:true,
                starDec:[
                    '糟糕',
                    '不满意',
                    '一般',
                    '满意',
                    '非常满意,无可挑剔'
                ],
                otherDec:[
                    '车内整洁',
                    '活地图',
                    '驾驶平稳',
                    '态度好'
                ]
            }
        },
        components:{ibutton},
        computed:{
            ...mapGetters(['curOrder','cookie','login_info'])
        },
        methods:{
            selectStar(count){
                // this.$store.dispatch('switchTravel','paySuccess')
                this.starCount = count+1;
                this.evaluate_status = 1;
            },
            otherDecSelect(val){
                let _index = this.otherDecSelected.findIndex((el)=>{return el == val});
                if(_index!=-1){
                    // 如果已经存在就删除
                    this.otherDecSelected.splice(_index,1)
                    return
                }
                this.otherDecSelected.push(val)
                this.evaluate_status = 1;
            },
            //提交评价
            submit(){
                this.evaluate_status = 2;
                if(this.customInput==''){
                    this.inputBorder = false;
                }
                let user_id = this.login_info.user_id;
                let order_id = this.curOrder.id;
                let star = this.starCount;
                let content = this.customInput;
                let labels = this.otherDecSelected;
                assessment({user_id,order_id,star,content,labels})
            },
            gotoHome(){
                this.$store.dispatch('switchTravel','selectAddr')
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../style/var.scss';

    .disable{
        pointer-events: none;
    }
    .evaluate{
        position: fixed;
        top:0;
        left:0;
        z-index:999;
        width:100%;
        height:100%;
        
        .content{
            position: absolute;
            bottom:0;
            background:#fff;
            width:100%;
            height:50%;
            &.active{
                height:70%;
                transition: height .5s; 
            }
        }
        .top{
            position: relative;
            text-align: center;
            font-size: 18px;
            padding:50px;
            border-bottom:1px solid $border_base;
            i{
                position: absolute;
                right:50px;
            }
        }

        .detail{
            padding:50px;
            .iconfont{
                font-size: 40px;
                &.icon-xing{color:$font_color_sub;}
                &.icon-xing1{color:$primary;}
            }
            >div{
                text-align: center;
                padding-bottom:50px;

            }
            .starDec{color:$primary;}
            .otherDec{
                span{
                    width:40%;
                    margin:20px;
                    display: inline-block;
                    border:1px solid $border_base;
                    padding:20px 30px;
                    border-radius: 10px;
                    &.active{color:$primary;}
                }
            }
            .input{
                margin:-15px 80px 0 80px;
                padding:0 80px;
                border-radius:10px;
                &.border{
                    border:1px solid $border_base;
                }
                input{
                    width:100%;
                    height:110px;
                }
                span{
                    display: inline-block;
                    width:100%;
                    height: 110px;
                    line-height: 110px;
                    text-align: left;
                    border-radius: 10px;
                }
            }

            .evaluate_btn{
                background:$black;
                margin:50px 75px;
                color:#fff;
                height:150px;
                line-height: 150px;
                border-radius: 10px;
                &.active{
                    background:$fill_base;
                    pointer-events: none;
                }
            }
        }

        .shadow{
            position: absolute;
            z-index: -1;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,.4);

        }
    }
</style>
